import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  FlatList,
  ScrollView,
  TouchableOpacity
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import styles from './style';
import NoneData from '../../../../components/noneData';
import { fromNow } from '../../../../utils';
import Spin from '../../../../components/spin';
const ActivityTag = ({ text, bgColor, tColor = '#fff' }) => {
  return (
    <View style={[styles.activityTag, { backgroundColor: bgColor }]}>
      <Text style={{ color: tColor }}>{text}</Text>
    </View>
  );
};

/* 列表单项 */
class Item extends Component {
  constructor(props) {
    super(props);
    this.state = { width: 0, height: 0 };
  }
  componentWillReceiveProps(next) {}
  shouldComponentUpdate(props, state) {
    if (state.width === this.state.width) {
      return false;
    }
    return true;
  }
  render() {
    const { data } = this.props;
    const onPress = (eventId, eventType) => {
      Actions.activityDetail({ eventId, eventType });
    };
    const onLayout = e => {
      const { width } = e.nativeEvent.layout;
      this.setState({
        width,
        height: (width / 3) * 2
      });
    };

    const typeText = data => {
      const { collectCustomerEvent, collectPolicyEvent, insuranceOrgId } = data;
      if (!insuranceOrgId) {
        return <ActivityTag text="答橙通告" bgColor="#b36b00" />;
      }
      if (collectCustomerEvent) {
        return <ActivityTag text="客户采集" bgColor="#0099cc" />;
      }
      if (collectPolicyEvent) {
        return <ActivityTag text="保单采集" bgColor="#339933" />;
      }
    };
    return (
      <View style={styles.itemWrap}>
        {typeText(data)}
        <TouchableOpacity
          onPress={() => onPress(data.eventId, data.type)}
          style={styles.item}
        >
          <View style={styles.wrap} onLayout={onLayout}>
            {data.profileImgUrl ? (
              <Image
                source={{ uri: data.profileImgUrl }}
                style={[
                  {
                    width: this.state.width,
                    height: this.state.height,
                    resizeMode: 'cover'
                  },
                  styles.img
                ]}
              />
            ) : (
              <View
                style={{
                  width: this.state.width,
                  height: this.state.height,
                  backgroundColor: '#ddd'
                }}
              />
            )}
            <View style={[styles.title, { width: this.state.width }]}>
              <Text style={styles.titleText}>{data.title}</Text>
              <Text style={styles.titleDate}>
                {fromNow('2018-06-01')}发布
              </Text>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const keyExtractor = item => item.eventId.toString();
export default class List extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {
      pending,
      listData
    } = this.props;
    return (
      <Spin visible={pending}>
        <View style={styles.customerListWrap}>
          {listData.length > 0 ? (
            <ScrollView style={styles.activitiesList} onLayout={this.onLayout}>
              <FlatList
                data={listData}
                renderItem={({ item, index }) => {
                  return <Item data={item} style={styles.listWrap} />;
                }}
                keyExtractor={keyExtractor}
              />
            </ScrollView>
          ) : (
            <NoneData />
          )}
        </View>
      </Spin>
    );
  }
}
